<template>
  <div class="order">
    <div class="order-container">
      <div class="order-header">
        <h2 class="title">订单记录</h2>
      </div>
      <div class="tab-wrapper">
        <div
          class="tab-item left"
          :class="{ active: activeTab === 'open' }"
          @click="switchTab('open')"
        >
          持仓订单
        </div>
        <div
          class="tab-item right"
          :class="{ active: activeTab === 'closed' }"
          @click="switchTab('closed')"
        >
          平仓订单
        </div>
      </div>
    </div>

    <div class="order-list">
      <!-- Open Orders -->
      <template v-if="activeTab === 'open'">
        <div v-for="order in openOrders" :key="order.id" class="order-item">
          <div class="symbol-section">
            <div class="divider-line"></div>
            <div class="order-top">
              <div class="order-symbol">{{ order.symbol }}</div>
              <div class="order-time">{{ getTimeIp(order.createdAt) }}</div>
            </div>
            <div class="countdown">结算计时：0秒</div>
            <div class="divider-line"></div>
          </div>
          <div class="info-grid">
            <div class="info-column">
              <div class="info-label">投资金额</div>
              <div class="info-value">{{ order.amount }}</div>
            </div>
            <div class="info-column">
              <div class="info-label">方向</div>
              <div
                class="info-value"
                :class="{
                  'direction-up': order.direction == 'UP',
                  'direction-down': order.direction != 'UP',
                }"
              >
                {{ order.direction === "UP" ? "涨" : "跌" }}
              </div>
            </div>
            <div class="info-column">
              <div class="info-label">比例</div>
              <div class="info-value">{{ order.profitRatio * 100 }}%</div>
            </div>
            <div class="info-column">
              <div class="info-label">投资时间</div>
              <div class="info-value">{{ order.countdown }}S</div>
            </div>
          </div>
          <div class="price-section">
            <div class="price-row">
              <div class="price-label">买入价格</div>
              <div class="price-value">{{ order.openPrice.toFixed(4) }}</div>
            </div>
            <div class="price-row">
              <div class="price-label">平仓价格</div>
              <div class="price-value">
                {{ order.closePrice&&order.closePrice.toFixed(4) || "0.0000" }}
              </div>
            </div>
            <div class="price-row">
              <div class="price-label">盈利</div>
              <div class="price-value">——</div>
            </div>
          </div>
        </div>

        <div v-if="openOrders.length === 0" class="empty-state">
          <img src="../assets/nomore.png" alt="empty" class="empty-icon" />
          <p class="empty-text">没有更多了</p>
        </div>
      </template>

      <!-- Closed Orders -->
      <template v-else>
        <div v-for="order in closedOrders" :key="order.id" class="order-item">
          <div class="symbol-section">
            <div class="divider-line"></div>
            <div class="order-top">
              <div class="order-symbol">{{ order.symbol }}</div>
              <div class="order-time">{{ getTimeIp(order.endTime) }}</div>
            </div>
            <div class="divider-line"></div>
          </div>
          <div class="info-grid">
            <div class="info-column">
              <div class="info-label">投资金额</div>
              <div class="info-value">{{ order.amount }}</div>
            </div>
            <div class="info-column">
              <div class="info-label">方向</div>
              <div
                class="info-value"
                :class="{
                  'direction-up': order.direction == 'UP',
                  'direction-down': order.direction != 'UP',
                }"
              >
                {{ order.direction === "UP" ? "涨" : "跌" }}
              </div>
            </div>
            <div class="info-column">
              <div class="info-label">比例</div>
              <div class="info-value">{{ order.profitRatio * 100 }}%</div>
            </div>
            <div class="info-column">
              <div class="info-label">投资时间</div>
              <div class="info-value">{{ order.countdown }}S</div>
            </div>
          </div>
          <div class="price-section">
            <div class="price-row">
              <div class="price-label">买入价格</div>
              <div class="price-value">{{ order.openPrice.toFixed(4) }}</div>
            </div>
            <div class="price-row">
              <div class="price-label">平仓价格</div>
              <div class="price-value">{{ order.closePrice&&order.closePrice.toFixed(4) }}</div>
            </div>
            <div class="price-row">
              <div class="price-label">盈利</div>
              <div
                class="price-value"
                :class="`profit-${order.actualProfit >= 0 ? 'up' : 'down'}`"
              >
                {{ order.actualProfit >= 0 ? "+" : "" }}{{ order.actualProfit }}
              </div>
            </div>
          </div>
        </div>

        <div v-if="closedOrders.length === 0" class="empty-state">
          <img src="../assets/nomore.png" alt="empty" class="empty-icon" />
          <p class="empty-text">没有更多了</p>
        </div>
      </template>
    </div>

    <div class="load-more">没有更多数据了</div>
  </div>
</template>

<script setup name="Order">
import { ref, onUnmounted } from "vue";
import { getTimeIp } from "@/utils/calculator";
import { OrderApi } from "@/api/order.ts";
const activeTab = ref("open");

const openOrders = ref([]);

const closedOrders = ref([]);

const switchTab = (tab) => {
  activeTab.value = tab;
  if (tab === "closed") {
    getClosedOrders(); 
  } else {
    getOpenOrders(); 
  }
};
let flag = ref(true);
const getOpenOrders = () => {
  OrderApi.getOrders({
    page: 0,
    size: 10,
    status: "OPEN",
  }).then((res) => {
    if (res.code == 200) {
      openOrders.value = res.data.records;
      if(!openOrders.value.length){
        flag.value = false;
      }
    }
  });
};
const getClosedOrders = () => {
  OrderApi.getOrders({
    page: 0,
    size: 10,
    status: "CLOSED",
  }).then((res) => {
    if (res.code == 200) {
      closedOrders.value = res.data.records;
    }
  });
};
getOpenOrders();
const timer = ref(null);
timer.value = setInterval(() => {
  if (flag.value) {
    getOpenOrders();
  }else{
    clearInterval(timer.value);
  }
}, 1000);

onUnmounted(() => {
  clearInterval(timer.value);
});
</script>

<style scoped>
.order {
  min-height: 100vh;
  background: #121212;
  padding-bottom: 60px;
}

.order-container {
  background-color: #121212;
  color: #e0e0e0;
  padding-top: 4px;
}

.order-header {
  padding: 12px;
  text-align: center;
  background-color: #1e1e1e;
  border-bottom: none;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.tab-wrapper {
  display: flex;
  padding: 8px 12px;
}
.tab-item.left {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  color: #e0e0e0;
  cursor: pointer;
  background: #2a2a2a;
  position: relative;
}

.tab-item.active {
  background: #4460f6;
  color: #fff;
  box-shadow: 0 2px 8px #4460f64d;
}
.tab-item.right {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
.order-list {
  margin-top: 10px;
  padding-bottom: 60px;
}

.order-item {
  background: #1e1e1e;
  border-radius: 8px;
  padding: 15px;
  margin: 8px;
}

.symbol-section {
  position: relative;
  padding: 6px 0;
}

.divider-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.divider-line:first-child {
  top: 0;
}

.order-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.order-symbol {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

.order-time {
  font-size: 13px;
  color: #b0b0b0;
}

.countdown {
  text-align: center;
  color: #e0e0e0;
  font-size: 14px;
  margin: 8px 0;
  font-weight: 500;
}

.info-grid {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}

.info-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.info-label {
  font-size: 12px;
  color: #b0b0b0;
  font-weight: 500;
  margin-bottom: 4px;
}

.info-value {
  font-size: 13px;
  color: #e0e0e0;
  font-weight: 600;
}

.direction-up {
  color: #4ade80 !important;
}

.direction-down {
  color: #f56c6c !important;
}

.price-section {
  background: #272727;
  border-radius: 4px;
  padding: 12px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  line-height: 24px;
}

.price-label {
  font-size: 13px;
  color: #b0b0b0;
  font-weight: 500;
}

.price-value {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}

.profit-up {
  color: #4ade80;
}

.profit-down {
  color: #f56c6c;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.empty-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
}

.empty-text {
  font-size: 14px;
  color: #999;
}

.load-more {
  text-align: center;
  padding: 15px 0;
  font-size: 12px;
  color: #999;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #fff;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  color: #666;
  text-decoration: none;
}

.nav-item.active {
  color: #1989fa;
}

.nav-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 4px;
}

.nav-item span {
  font-size: 12px;
}
</style>
